<template>
    <div class="demo">
        <div class="panel">
            <div class="panel-head">
                <div class="panel-head-l">上传demo</div>
            </div>
            <div class="panel-body">
                <el-alert type="success"
                          :closable="false">
                    type 不传则不限制文件类型 传'image'则限制只能传图片 <br /> multiple 默认是 true，即可以选择多个文件上传
                </el-alert>

                <el-divider content-position="left">文件上传_列表</el-divider>
                <div class="flex-row">
                    <comp-upload class="com-button"
                                 @upload-success="fFileUploadSuccess">
                        <el-button>多文件上传</el-button>
                    </comp-upload>
                    <!--<comp-upload type="image"
                                 :multiple="false"
                                 class="com-button"
                                 @upload-success="fFileUploadSuccess">
                        <el-button type="success">单图片上传</el-button>
                    </comp-upload>-->
                </div>
                <div class="com-file-list">
                    <div class="com-file-item"
                         v-for="(oFile, nIdx) in aFilesList"
                         :key="nIdx">
                        <div class="com-file-name">{{oFile.name}}</div>
                        <!-- 删除按钮 -->
                        <div class="com-file-tools">
                            <span class="com-file-tool">下载</span>
                            <span class="com-file-tool _danger"
                                  @click="fFileToolClick('delete', oFile, nIdx)">删除</span>
                        </div>
                    </div>
                </div>

                <el-divider content-position="left">文件上传_缩略图</el-divider>
                <div class="com-thumbnail-list">
                    <div class="com-thumbnail-item"
                         v-for="(oFile, nIdx) in aThumbnailList"
                         :key="nIdx">
                        <el-image :src="sFileSrcPre + oFile.id"
                                  class="com-thumbnail-upload-img"
                                  :preview-src-list="aThumbnailListPreview"
                                  fit="scale-down"></el-image>
                        <!-- 删除按钮 -->
                        <span class="com-thumbnail-delete el-icon-close"
                              @click="fThumbnailToolClick('delete', oFile, nIdx)"></span>
                    </div>

                    <!-- 多文件上传 -->
                    <!--<comp-upload class="com-thumbnail-item"
                                 @upload-success="fThumbnailUploadSuccess">
                        <div class="com-thumbnail-upload">
                            <i class="el-icon-plus"></i>
                        </div>
                    </comp-upload>-->
                    <!-- 单图片上传 -->
                    <comp-upload type="image"
                                 :multiple="false"
                                 class="com-thumbnail-item"
                                 @upload-success="fThumbnailUploadSuccess">
                        <div class="com-thumbnail-upload">
                            <i class="el-icon-plus"></i>
                        </div>
                    </comp-upload>
                </div>

                <el-divider content-position="left">头像上传</el-divider>
                <div class="flex-row">
                    <comp-upload class="com-thumbnail-item"
                                 :multiple="false"
                                 @upload-success="fUploadAvatarSuccess">
                        <div class="com-thumbnail-upload">
                            <el-image v-if="sAvatarSrc"
                                      :src="sFileSrcPre + sAvatarSrc"
                                      class="com-thumbnail-upload-img"
                                      fit="cover">
                            </el-image>
                            <i v-else
                               class="el-icon-plus"></i>
                        </div>
                    </comp-upload>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { URLS_COM } from '@/urls';
    import CompUpload from '@/components/project/upload.vue';
    export default {
        components: {
            CompUpload
        },
        data() {
            return {
                sFileSrcPre: URLS_COM.i_pre,//文件预览地址
                //文件上传-列表
                aFilesList: [{ id: '1', name: '文件1.jpg' }, { id: '2', name: '文件2.jpg' }, { id: '3', name: '文件3.jpg' }],
                //文件上传-缩略图
                aThumbnailList: [{ id: '1', name: '文件1.jpg' }, { id: '2', name: '文件2.jpg' }, { id: '3', name: '文件3.jpg' }],
                //头像地址
                sAvatarSrc: '',
            };
        },
        computed: {
            //缩略图列表-处理预览路径
            aThumbnailListPreview() {
                return this.aThumbnailList.map((oFile) => {
                    return this.sFileSrcPre + oFile.id
                })
            },
        },
        mounted() {
        },
        methods: {
            //------- 文件上传_列表
            //文件列表项的按钮点击事件
            fFileToolClick(sType, oFile, nIdx) {
                switch (sType) {
                    case 'delete'://删除
                        this.aFilesList.splice(nIdx, 1);
                        break;
                }
            },
            //文件上传成功
            fFileUploadSuccess(oFile) {
                console.log(oFile);
                this.aFilesList.push(oFile);
            },
            //------- 文件上传_缩略图
            //缩略图上的按钮点击事件
            fThumbnailToolClick(sType, oFile, nIdx) {
                switch (sType) {
                    case 'delete'://删除
                        this.aThumbnailList.splice(nIdx, 1);
                        break;
                }
            },
            //文件上传成功
            fThumbnailUploadSuccess(oFile) {
                console.log(oFile);
                this.aThumbnailList.push(oFile);
            },
            //------- 头像上传
            //头像上传成功
            fUploadAvatarSuccess(oFile) {
                this.sAvatarSrc = oFile.id;
            }
        }
    };
</script>
